import React from 'react';
import { motion } from 'motion/react';
import { Button } from '../../components/ui/button';
import { Card, CardContent, CardHeader } from '../../components/ui/card';
import { Badge } from '../../components/ui/badge';
import { MedicalCard } from '../recommendation/MedicalCard';
import { 
  ArrowLeft, 
  Brain, 
  Heart, 
  Activity,
  Stethoscope,
  MapPin,
  Clock,
  FileText,
  Navigation
} from 'lucide-react';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../../components/ui/collapsible';

interface RecommendationPageProps {
  symptoms: string[];
  onGoBack: () => void;
  onProceedToRecord: () => void;
}

export function RecommendationPage({ symptoms, onGoBack, onProceedToRecord }: RecommendationPageProps) {
  const recommendations = [
    {
      id: '1',
      name: '消化内科',
      icon: <Activity className="w-8 h-8" />,
      matchScore: 92,
      waitTime: '约 25 分钟',
      reason: '您的腹胀、消化不良症状高度匹配',
      location: '门诊大楼 3楼',
      doctor: '张主任医师'
    },
    {
      id: '2', 
      name: '胃肠外科',
      icon: <Stethoscope className="w-8 h-8" />,
      matchScore: 78,
      waitTime: '约 45 分钟',
      reason: '可排除器质性病变，建议优先检查',
      location: '门诊大楼 2楼',
      doctor: '李副主任医师'
    },
    {
      id: '3',
      name: '中医科',
      icon: <Heart className="w-8 h-8" />,
      matchScore: 65,
      waitTime: '约 15 分钟',
      reason: '可从整体调理角度改善消化功能',
      location: '门诊大楼 5楼',
      doctor: '王中医师'
    }
  ];

  const examinations = [
    {
      title: '胃镜检查',
      purpose: '直观查看胃部情况，确诊胃炎、溃疡等疾病',
      preparation: '检查前12小时禁食禁水',
      priority: 'high'
    },
    {
      title: '腹部B超',
      purpose: '检查肝胆胰脾等腹部器官情况',
      preparation: '检查前8小时禁食，保持膀胱充盈',
      priority: 'medium'
    },
    {
      title: '血常规化验',
      purpose: '检查是否存在炎症或其他血液异常',
      preparation: '空腹抽血，前一晚12点后禁食',
      priority: 'medium'
    }
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50 relative medical-pattern">
      {/* 顶部导航 */}
      <motion.div 
        className="bg-white shadow-sm border-b px-4 py-4"
        initial={{ y: -100 }}
        animate={{ y: 0 }}
      >
        <div className="flex items-center justify-between max-w-6xl mx-auto">
          <div className="flex items-center space-x-4">
            <Button
              variant="ghost"
              onClick={onGoBack}
              className="text-gray-600"
            >
              <ArrowLeft className="w-4 h-4 mr-2" />
              重新问诊
            </Button>
            <h1 className="text-lg font-semibold text-gray-900">科室推荐</h1>
          </div>
          
          <Button variant="outline" className="text-blue-600 border-blue-200">
            <MapPin className="w-4 h-4 mr-2" />
            医院地图
          </Button>
        </div>
      </motion.div>

      <div className="px-4 py-8">
        <div className="max-w-6xl mx-auto space-y-8">
          {/* 症状总结 */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
          >
            <Card className="bg-blue-50 border-blue-200">
              <CardHeader>
                <h3 className="text-lg font-semibold text-blue-900">症状分析总结</h3>
              </CardHeader>
              <CardContent>
                <div className="flex flex-wrap gap-2">
                  {symptoms.map((symptom, index) => (
                    <Badge key={index} variant="secondary" className="bg-blue-100 text-blue-800">
                      {symptom}
                    </Badge>
                  ))}
                </div>
                <p className="mt-3 text-blue-800">
                  根据您描述的症状，建议优先就诊消化内科进行详细检查。
                </p>
              </CardContent>
            </Card>
          </motion.div>

          {/* 科室推荐 */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
          >
            <h2 className="text-2xl mb-6 text-center text-gray-900">
              为您推荐以下科室
            </h2>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {recommendations.map((dept, index) => (
                <motion.div
                  key={dept.id}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: index * 0.1 + 0.3 }}
                >
                  <MedicalCard
                    type="department"
                    title={dept.name}
                    subtitle={dept.doctor}
                    icon={dept.icon}
                    matchScore={dept.matchScore}
                    waitTime={dept.waitTime}
                    description={dept.reason}
                    actionLabel="预约挂号"
                    onAction={() => console.log(`预约 ${dept.name}`)}
                    className="h-full"
                  />
                </motion.div>
              ))}
            </div>
          </motion.div>

          {/* 检查项目建议 */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
          >
            <Card>
              <CardHeader>
                <h3 className="text-lg font-semibold text-gray-900">建议检查项目</h3>
                <p className="text-gray-600">根据您的症状，医生可能会安排以下检查</p>
              </CardHeader>
              <CardContent className="space-y-4">
                {examinations.map((exam, index) => (
                  <Collapsible key={index}>
                    <CollapsibleTrigger className="flex items-center justify-between w-full p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                      <div className="flex items-center space-x-3">
                        <div className={`w-3 h-3 rounded-full ${
                          exam.priority === 'high' ? 'bg-red-400' : 'bg-yellow-400'
                        }`} />
                        <span className="font-medium text-left">{exam.title}</span>
                        {exam.priority === 'high' && (
                          <Badge variant="destructive" className="text-xs">推荐</Badge>
                        )}
                      </div>
                      <FileText className="w-4 h-4 text-gray-400" />
                    </CollapsibleTrigger>
                    <CollapsibleContent className="p-4 border-l-2 border-gray-200 ml-6">
                      <div className="space-y-2">
                        <p className="text-gray-700">
                          <span className="font-medium">检查目的：</span>{exam.purpose}
                        </p>
                        <p className="text-gray-700">
                          <span className="font-medium">注意事项：</span>{exam.preparation}
                        </p>
                      </div>
                    </CollapsibleContent>
                  </Collapsible>
                ))}
              </CardContent>
            </Card>
          </motion.div>

          {/* 底部操作区 */}
          <motion.div
            className="flex justify-center space-x-4"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.5 }}
          >
            <Button
              onClick={onProceedToRecord}
              size="lg"
              className="bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white px-8 py-3 rounded-xl shadow-lg hover:shadow-xl"
            >
              <FileText className="w-5 h-5 mr-2" />
              生成就诊病历
            </Button>
            
            <Button
              variant="outline"
              size="lg"
              className="border-2 border-blue-200 hover:border-blue-300 hover:bg-blue-50 px-8 py-3 rounded-xl"
            >
              <Navigation className="w-5 h-5 mr-2" />
              导航至科室
            </Button>
          </motion.div>
        </div>
      </div>
    </div>
  );
}